<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { videoStoreHook } from "@/store/module/video";
import { NewCMSContent, VideoContent } from "@/common/type/cms/content";
import { page } from "./playCard";
import { selectVideoList } from "@/api/cms_content";
import { cloneDeep } from "@pureadmin/utils";
import NewTag from "@/components/NewTag/NewTag.vue";
defineOptions({
  name: "PlayDescCard"
});

const showPage = (id: string) => {
  page.value.list.show = false;
  page.value.desc.show = false;
  page.value.commit.show = false;
  page.value[id].show = true;
};

const content = reactive<NewCMSContent>(cloneDeep(videoStoreHook().video));
const videoList = ref<VideoContent[]>([]);

const selected = (item: VideoContent) => {
  return item.vodRemarks === videoStoreHook().currentPlayer.video.vodRemarks;
};

const selectVideos = () => {
  selectVideoList(videoStoreHook().video.id).then(res => {
    videoList.value = res.entity;
    if (
      videoStoreHook().currentPlayer.video?.contentId !==
      videoStoreHook().video.id
    ) {
      videoStoreHook().CHANGE_CURRENT_PLAYER(videoList.value[0]);
      console.log(videoStoreHook().currentPlayer);
    }
  });
};
const checkVideoPlay = (video: VideoContent) => {
  videoStoreHook().CHANGE_CURRENT_PLAYER(video);
};
onMounted(() => {
  selectVideos();
});
</script>

<template>
  <div class="play-desc">
    <div class="tab-group">
      <div
        v-for="(item, index) in page"
        :key="index"
        class="tab-button"
        @click="showPage(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="play-desc-content">
      <div v-if="page.list.show" class="video-list">
        <div class="video-list-desc">
          <div
            class="video-list-desc-banner"
            :style="`background-image: url(${content.banner.url});`"
          />
          <div class="video-list-desc-content">
            <div class="video-list-desc-content-title-box">
              <div class="video-list-desc-content-title">
                {{ content.title }}
              </div>
              <div class="title-out" @click="showPage(page.desc.id)">简介></div>
            </div>
            <div class="video-list-desc-content-desc" v-html="content.desc" />
            <div class="video-list-desc-content-tag">
              {{ content.year[0].name }}·{{ content.remark }}
            </div>
          </div>
        </div>
        <div
          v-for="(item, index) in videoList"
          :key="index"
          class="video-remaker"
          :selected="selected(item)"
          @click="checkVideoPlay(item)"
        >
          {{ item.vodRemarks }}
        </div>
      </div>
      <div v-if="page.desc.show" class="video-desc">
        <div style="font-size: 25px; padding: 0 5px">
          {{ content.title }}
        </div>
        <div>
          导演：{{ content.functionField3 ? content.functionField3 : "未知" }}
        </div>
        <div>
          编剧：{{ content.functionField3 ? content.functionField4 : "未知" }}
        </div>
        <div>演员：{{ content.functionField2 }}</div>
        <div style="margin: 10px 0">
          标签：
          <NewTag :label="content.year[0]?.name" />
          <NewTag :label="content.type[0]?.name" />
          <NewTag :label="content.area[0]?.name" />
          <NewTag :label="content.language[0]?.name" />
        </div>
      </div>
      <div v-if="page.commit.show" class="video-commit">
        {{ content.desc }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="css">
.video-list-desc {
  position: relative;
  margin-bottom: 20px;
}
.video-list-desc-banner {
  vertical-align: top;
  display: inline-block;
  width: 30%;
  height: 130px;
  background-size: cover; /* 保持宽高比，同时覆盖整个元素 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
}
.video-list-desc-content {
  display: inline-block;
  width: 70%;
  height: 130px;
  padding-left: 10px;

  font-family: serif;
}
.video-list-desc-content-title-box {
  position: relative;
  font-family: shtgzhk, serif;
  line-height: 20px;
  height: 20px;
  margin-bottom: 5px;
}
.video-list-desc-content-title {
  font-size: 20px;
  vertical-align: top;
  display: inline-block;
  max-width: 75%;
  padding-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.title-out {
  vertical-align: top;
  line-height: 20px;
  display: inline-block;
  width: 25%;
  font-size: 13px;
  transition: all 300ms;
  cursor: pointer;
}
.title-out:hover {
  color: rgb(28, 129, 212);
}
.video-list-desc-content-desc {
  height: 85px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 11px;
}
.video-list-desc-content-tag {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  font-size: var(--newcms-font-size-tag-small);
}
.play-desc {
  border-radius: 10px;
  background-color: var(--newcms-background-color-normal);
  overflow: hidden;
  background-color: rgba(47, 47, 47, 0.652);
  box-shadow: rgba(124, 124, 124, 0.352) 1px 1px 10px 1px;
  color: rgb(188, 188, 188);
  height: 100%;
}
.tab-group {
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid rgb(188, 188, 188, 0.2);
  border-radius: 10px 10px 0 0;
  margin-bottom: 10px;
}

.tab-button {
  color: #d7d7d7;
  height: 100%;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: all 300ms;
  width: 70px;
}
.tab-button:hover {
  background-color: rgba(240, 248, 255, 0.552);
  color: black;
}
.video-list {
  padding: 10px;
}
.video-remaker {
  display: inline-block;
  background-color: rgb(70, 70, 70);
  border-radius: 5px;
  padding: 3px 6px;
  margin: 5px;
  font-family: monospace;
  cursor: pointer;
  transition: all 300ms;
}
.video-remaker:hover {
  background-color: rgb(223, 223, 223);
  color: #000;
}
.video-remaker[selected="true"] {
  background-color: rgb(223, 223, 223);
  color: #000;
}
.video-desc {
  padding: 10px;
}
</style>
